<template>
  <div class="content">
    <dc-header :page-to="'/dishAnalysis'" :title="'菜类销售排行'" :rightIcon="''"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.param.beginTime" :startDateType="this.param.timeFlag"></dc-date>
    </div>
    <dc-rank ref="saleRank"
             :titles="rankTitle" :rankKey="rankKey"
             :param="param" :url="url"></dc-rank>
  </div>
</template>

<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import rankList from '@/components/rankList';
  import date from '@/components/datetabbar/all';
  import {mapMutations, mapGetters} from 'vuex';

  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'dc-rank': rankList,
      'dc-date': date
    },
    data () {
      return {
        param: {
          timeFlag: 1,  //时间范围标识，1-日；2-周；3-月；4-年
          beginTime: null,
          endTime: null,
          dishCategoryCode: 0 //菜品类别编码，0-全部类别；1-精选套餐2-酒水饮料；3-美味小吃
        },
        rankTitle: [
          {name: '菜类', isRank: false},
          {name: '销售金额(元)', isRank: false}
        ],
        rankKey: ['dishCategoryName', 'dishCategorySales'],
        url: 'getPopularItemRank'
      };
    },
    created () {
      this.param = {
        timeFlag: this.curDate.type,  //时间范围标识，1-日；2-周；3-月；4-年
        beginTime: this.curDate.startTime,
        endTime: this.curDate.endTime
      };
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapMutations({saveDate: 'SAVEDATE'}),
      getDate (date) {
        if (date) {
          this.saveDate(date);
          this.param.timeFlag = date.type;
          this.param.beginTime = date.startTime;
          this.param.endTime = date.endTime;
        }
        this.$refs.saleRank.changeList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .list {
    text-align: left;
    font-size: px2rem(30px);
    line-height: 2;
    background-color: #fff;
  }

  .head-bg {
    background-color: #f5f5f5;
    font-weight: bold;
  }

  .dish-img {
    width: px2rem(100px);
    height: px2rem(100px);
    border-radius: 50%;
    vertical-align: middle;
  }
</style>
